<template>
  <view class="edit-profile-container" :class="currentTheme">
    <!-- 头像区域 -->
    <view class="avatar-section">
      <image class="avatar" :src="avatar"></image>
      <text class="change-avatar" @click="chooseAvatar">点击更换头像</text>
    </view>
    <!-- 表单区域 -->
    <form class="form-section">
      <view class="form-item">
        <text class="label required">公司名称</text>
        <input class="input" type="text" v-model="enterpriseName" placeholder="请输入公司名称" />
      </view>
      <view class="form-item">
        <text class="label required">行业</text>
        <input class="input" type="text" v-model="companyIndustry" placeholder="请输入行业" />
      </view>
      <view class="form-item">
        <text class="label required">规模</text>
        <input class="input" type="text" v-model="companySize" placeholder="请输入公司规模" />
      </view>
      <view class="form-item">
        <text class="label required">阶段</text>
        <input class="input" type="text" v-model="financingStage" placeholder="请输入融资阶段" />
      </view>
      <view class="form-item">
        <text class="label required">地址</text>
        <input class="input" type="text" v-model="companyRegion" placeholder="请输入公司地址" />
      </view>
      <view class="form-item">
        <text class="label required">联系电话</text>
        <input class="input" type="text" v-model="phone" placeholder="请输入联系电话" />
      </view>
      <view class="form-item">
        <text class="label required">邮箱</text>
        <input class="input" type="text" v-model="email" placeholder="请输入邮箱" />
      </view>
      <view class="form-item">
        <text class="label required">简介</text>
        <textarea class="input" v-model="companyProfile" placeholder="请输入公司简介" />
      </view>
      <button class="submit-btn" type="primary" @click="onSubmit">提交</button>
    </form>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { updateEmployInfo } from "@/api/userInformation.js";

export default {
  data() {
    return {
      currentTheme: 'theme1', // 添加主题数据属性
      avatar: "", // 默认头像
      enterpriseName: "",
      email: "",
      companyIndustry: "",
      companySize: "",
      financingStage: "",
      companyRegion: "",
      phone: "",
      companyProfile: "",
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo,
    })
  },
  methods: {
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.avatar = tempFilePath;
        },
      });
    },
    async onSubmit() {
      const formData = {
        avatar: this.avatar,
        enterpriseName: this.enterpriseName,
        email: this.email,
        companyIndustry: this.companyIndustry,
        companySize: this.companySize,
        financingStage: this.financingStage,
        companyRegion: this.companyRegion,
        phone: this.phone,
        companyProfile: this.companyProfile,
      };

      // 简单表单验证
      if (!formData.enterpriseName) {
        uni.showToast({ title: "请输入公司名称", icon: "none" });
        return;
      }

      try {
        const res = await updateEmployInfo(formData);
        console.log("提交的表单数据：", formData);
        uni.showToast({ title: "提交成功", icon: "success" });
      } catch (error) {
        console.error("提交失败：", error);
        uni.showToast({ title: "提交失败", icon: "none" });
      }
    },
    ...mapActions(['queryEmployInfo']),
  },
  mounted() {
    // 加载主题设置
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
    
    // 监听全局主题变化事件
    this.themeChangeHandler = (newTheme) => {
      this.currentTheme = newTheme;
    };
    uni.$on('global-theme-change', this.themeChangeHandler);
    
    this.queryEmployInfo();
    this.avatar = this.userInfo?.avatar || "";
    this.enterpriseName = this.userInfo?.enterpriseName || "";
    this.email = this.userInfo?.email || "";
    this.phone = this.userInfo?.phone || "";
    this.companyIndustry = this.userInfo?.companyIndustry || "";
    this.companySize = this.userInfo?.companySize || "";
    this.financingStage = this.userInfo?.financingStage || "";
    this.companyRegion = this.userInfo?.companyRegion || "";
    this.companyProfile = this.userInfo?.companyProfile || "";
  },
  onShow() {
    // 重新加载主题设置，确保主题同步
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
  },
  beforeDestroy() {
    // 移除全局事件监听，防止内存泄漏
    uni.$off('global-theme-change', this.themeChangeHandler);
  },
};
</script>

<style scoped>
.edit-profile-container {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 20px; /* 添加底部边距防止被遮挡 */
}
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.change-avatar {
  color: #b6ccd8;
}
.form-section {
  background-color: #fff;
}
.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #b6ccd8;
}
.label {
  width: 100px;
  text-align: left;
  margin-right: 10px;
  color: #333;
}
.required::before {
  content: "* ";
  color: #f56c6c;
}
.input,
.picker-view {
  flex: 1;
  padding: 5px;
}
.submit-btn {
  margin-top: 20px;
  margin-bottom: 20px; /* 添加底部边距防止被遮挡 */
  background-color: #b6ccd8;
}
/* 主题样式 */
/* Theme 1 - 蓝色主题 */
.edit-profile-container.theme1 {
  background-color: #F8FBFF;
}

.edit-profile-container.theme1 .avatar-section {
  background-color: transparent;
}

.edit-profile-container.theme1 .change-avatar {
  color: #4A90E2;
  font-weight: 600;
}

.edit-profile-container.theme1 .form-section {
  background-color: #FFFFFF;
  border: 1px solid #E8F4FD;
  box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.08);
}

.edit-profile-container.theme1 .form-item {
  border-bottom: 1px solid #E8F4FD;
}

.edit-profile-container.theme1 .label {
  color: #4A90E2;
  font-weight: 600;
}

.edit-profile-container.theme1 .required::before {
  color: #e74c3c;
}

.edit-profile-container.theme1 .input,
.edit-profile-container.theme1 .picker-view {
  background-color: #F8FBFF;
  border: 1px solid #E8F4FD;
  border-radius: 4px;
  color: #2C3E50;
}

.edit-profile-container.theme1 .input::placeholder {
  color: #5A6C7D;
}

.edit-profile-container.theme1 .submit-btn {
  background-color: #4A90E2;
  color: #ffffff;
  border: none;
  box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.15);
}

.edit-profile-container.theme1 .submit-btn:hover {
  background-color: #3A7BC8;
  box-shadow: 0 6rpx 20rpx rgba(74, 144, 226, 0.25);
}

/* Theme 2 - 棕色/米色主题 */
.edit-profile-container.theme2 {
  background-color: #FDF8F3;
}

.edit-profile-container.theme2 .avatar-section {
  background-color: transparent;
}

.edit-profile-container.theme2 .change-avatar {
  color: #A0522D;
  font-weight: 600;
}

.edit-profile-container.theme2 .form-section {
  background-color: #FFFBF7;
  border: 1px solid #F5E6D3;
  box-shadow: 0 4rpx 16rpx rgba(160, 82, 45, 0.08);
}

.edit-profile-container.theme2 .form-item {
  border-bottom: 1px solid #F5E6D3;
}

.edit-profile-container.theme2 .label {
  color: #A0522D;
  font-weight: 600;
}

.edit-profile-container.theme2 .required::before {
  color: #cd853f;
}

.edit-profile-container.theme2 .input,
.edit-profile-container.theme2 .picker-view {
  background-color: #FDF8F3;
  border: 1px solid #F5E6D3;
  border-radius: 4px;
  color: #3E2723;
}

.edit-profile-container.theme2 .input::placeholder {
  color: #6D4C41;
}

.edit-profile-container.theme2 .submit-btn {
  background-color: #A0522D;
  color: #ffffff;
  border: none;
  box-shadow: 0 4rpx 16rpx rgba(160, 82, 45, 0.15);
}

.edit-profile-container.theme2 .submit-btn:hover {
  background-color: #8B4513;
  box-shadow: 0 6rpx 20rpx rgba(160, 82, 45, 0.25);
}

/* 禁用过渡和动画 */
.edit-profile-container * {
  transition: none !important;
  animation: none !important;
}
</style>